<html>
    <head>
        <script src="../colorpicker.js"></script>
        <link rel="stylesheet" type="text/css" href="../themes.css" />
        <link rel="stylesheet" type="text/css" href="showcase.css" />
    </head>
    <body>

        <h1><span>Showcase</span> of all the built-in <span>themes</span> and the use of <span>FlexiColorPicker</span></h1>

        <div id="container">

            <div id="default" class="cp cp-default"></div>
            <div id="fancy" class="cp cp-fancy"></div>
            <div id="small" class="cp cp-small"></div>

            <div class="io">

                <label>HEX</label>
                <input id="hex" type="text" value="" />

                <span id="rgb_css"></span>
                <label>R:</label>
                <input id="rgb_r" type="number" value="" />
                <label>G:</label>
                <input id="rgb_g" type="number" value="" />
                <label>B:</label>
                <input id="rgb_b" type="number" value="" />

                <span id="hsv_css"></span>
                <label>H:</label>
                <input id="hsv_h" type="text" value="" />
                <label>S:</label>
                <input id="hsv_s" type="text" value="" />
                <label>V:</label>
                <input id="hsv_v" type="text" value="" />

            </div>

            <div id="color"></div>
            <p id="text-color">Lorem ipsum dolor sit amet.</p>

        </div>

        <script src="showcase.js"></script>
    </body>
</html>
